<template>
    <div
        class="easy-button tc dib lh-solid pointer ph2 flex-shrink-0"
        :class="[typeClass, sizeClass, { disabled: disabled }]"
        v-on="$listeners"
    >
        <slot></slot>
    </div>
</template>

<script>
export default {
    name: 'EasyButton',
    props: {
        /** 按钮的大小 default|mini */
        size: {
            type: String,
            default: 'default',
        },

        /** @type {} 按钮的样式类型 primary|default|warn */
        type: {
            type: String,
            default: 'default',
        },

        /** 按钮是否镂空，背景色透明 */
        plain: {
            type: Boolean,
            default: false,
        },

        /** 是否禁用 */
        disabled: {
            type: Boolean,
            default: false,
        },
    },
    computed: {
        /** 样式类 */
        typeClass() {
            if (this.type === 'primary') {
                if (this.plain) {
                    return 'ba b--green green';
                }
                return 'bg-green white';
            }

            if (this.type === 'warn') {
                if (this.plain) {
                    return 'ba b--red red';
                }
                return 'bg-red white';
            }

            if (this.plain) {
                return 'ba b--dark-gray dark-gray';
            }
            return 'bg-near-white green';
        },

        /** 尺寸类 */
        sizeClass() {
            if (this.size === 'mini') {
                return 'w-button-mini br-2 f7 normal pv1';
            }
            return 'w-button br-4 f5 fw5 pv-11';
        },
    },
};
</script>

<style scoped>
.w-button {
    min-width: 115px;
}

.w-button-mini {
    min-width: 76px;
}
</style>
